<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="style.css" />
    <title>熊猫OA登录页</title>
  </head>
  <body>
    <div class="OA_NEW_container">
      <div class="OA_NEW_logo">
        <img src="./assert/panda1.png">
      </div>
      <div class="OA_NEW_title">
        <img src="./assert/title.png">
      </div>
      <div class="OA_NEW_showMyProduct">
        <div class="OA_NEW_Carousel" id="phoneCarousel">
          <div id="stage">
            <span>
              <img width="270" height="400" src="./assert/product1.png" alt="iPhone" id="iphone" class="default" />
            </span>
            <span>
              <img width="270" height="400" src="./assert/product2.png" alt="Nexus One" id="nexus" />
            </span>
            <span>
              <img width="270" height="400" src="./assert/product3.png" alt="BlackBerry" id="blackberry" />
            </span>
          </div>
          <img src="./assert/des1.png"  class="OA_NEW_Image0  OA_NEW_Image" style="display: none">
          <img src="./assert/des2.png"  class="OA_NEW_Image1 OA_NEW_Image">
          <img src="./assert/des3.png"  class="OA_NEW_Image2  OA_NEW_Image" style="display: none">
        </div>
      </div>
      <div class="OA_NEW_more_product" >
        <div class="OA_NEW_showMyProduct_top">
          <div class="OA_NEW_more_icon OA_NEW_open">
            <img src="./assert/open.png">
          </div>
          <div class="OA_NEW_more_icon OA_NEW_close">
            <img src="./assert/close.png">
          </div>
          <div class="OA_NEW_more_input">
            <input type="text" placeholder="搜索">
            <img src="./assert/search.png" class="OA_NEW_more_input_image">
          </div>
        </div>
        <div class="OA_NEW_showMyProduct_Bottom" id="article">
          <div id="OA_NEW_more_container">
          </div>
        </div>
      </div>
    </div>
  </body>
  <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
  <script>
    let activeSlide = 0;
    let searchContent ='';
    let count = 0;
    let length = '';
    let desStr = '';
    const slides = document.querySelectorAll('.OA_NEW_Image');
    const infos = document.querySelectorAll('.info')[0];
    const OA_NEW_showMyProduct_top = document.querySelectorAll('.OA_NEW_showMyProduct_top')[0];
    const Image0 = document.querySelectorAll('.OA_NEW_Image0')[0];
    const Image1 = document.querySelectorAll('.OA_NEW_Image1')[0];
    const Image2 = document.querySelectorAll('.OA_NEW_Image2')[0];
    const OA_NEW_open = document.querySelectorAll('.OA_NEW_open')[0];
    const OA_NEW_close = document.querySelectorAll('.OA_NEW_close')[0];
    const leftBtn = document.getElementById('left');
    const rightBtn = document.getElementById('right');
    const article = document.getElementById('article');
    const OA_NEW_more_container = document.getElementById('OA_NEW_more_container');
    const OA_NEW_more_product = document.querySelectorAll('.OA_NEW_more_product')[0];
    const OA_NEW_more_input = document.querySelectorAll('.OA_NEW_more_input')[0];
    const OA_NEW_more_input_image = document.querySelectorAll('.OA_NEW_more_input_image')[0];
    let star = "★★★★★☆☆☆☆☆";

    let productDes = [];

    $(document).ready(function(){
      var deg=0;
      var images = $('#stage img').removeClass('default').addClass('animationReady');
      var dim = { width:images.width(),height:images.height()};
      var cnt = images.length;
      var centerX = $('#stage').width()/2;
      var centerY = $('#stage').height()/2 - dim.height/2;

      //获取产品描述 列表
      $.ajax({
        type: "GET",
        url:"./productDes.json",
        dataType: "json",
        async: true,
        success:function(result){
          productDes = result;
          productDes.forEach(item => {
            desStr += `
        <div class="info">
            <div class="name">
                <h3>${item.name}</h3>
            </div>
            <div class="level" style="color: #ffbb29">
                ${star.slice(5 -item.level, 10 -item.level)}
            </div>
            <div class="des">
                ${item.describe}
            </div>
        </div>`;

          });
          document.getElementById('OA_NEW_more_container').innerHTML = desStr;
        },
        error:function (error) {
          console.log('error======>',error)
        }});

      showDesFunc = ()=>{
        activeSlide++;
        if(activeSlide % 3 === 0){
          $('.OA_NEW_Image2').css({display:'block'});
          $('.OA_NEW_Image0').css({display:'none'});
          $('.OA_NEW_Image1').css({display:'none'})
        }else if(activeSlide % 3 === 1){
          $('.OA_NEW_Image2').css({display:'block'});
          $('.OA_NEW_Image0').css({display:'none'});
          $('.OA_NEW_Image1').css({display:'none'})
        }else{
          $('.OA_NEW_Image0').css({display:'block'});
          $('.OA_NEW_Image1').css({display:'none'});
          $('.OA_NEW_Image2').css({display:'none'})
        }
      };
      timer2 = setInterval(showDesFunc,4000);

      //【切换长短屏】功能区
      $('.OA_NEW_close').click(function () {
        $('#OA_NEW_more_container').addClass('OA_NEW_more_container_short');
         $('.OA_NEW_close').css({display:'none'});
         $('.OA_NEW_open').css({display:'block'});
        $('#article').css({overflowY:'hidden',height:'100%'});
        $('.OA_NEW_more_product').css({height:'300px'});
        $('.OA_NEW_showMyProduct_top').css({height:0});
        $('.OA_NEW_more_input').css({display:'none',height:0});
        $('.info').removeClass('activeInfo');
      });
      $('.OA_NEW_open').click(function () {
        $('#OA_NEW_more_container').removeClass('OA_NEW_more_container_short');
        $('#OA_NEW_more_container').css({scrollTo:'100px'});
        $('.OA_NEW_close').css({display:'block'});
        $('.OA_NEW_open').css({display:'none'});
        $('.OA_NEW_more_product').css({height:'88vh'});
        $('#article').css({overflowY:'auto'});
        $('.OA_NEW_showMyProduct_top').css({height: '50px',background:'rgba(226,226,226,.2)'});
        $('.OA_NEW_more_input').css({display:'block',height: '50px'});
      });


      function rotate(step,total){
        deg+=step;
        var eSin,eCos,newWidth,newHeight,q;
        for(var i=0;i<cnt;i++){
          q = ((360/cnt)*i+deg)*Math.PI/180;
          eSin		= Math.sin(q);
          eCos		= Math.cos(q);
          q = (0.6+eSin*0.4);
          newWidth	= q*dim.width;
          newHeight	= q*dim.height;
          images.eq(i).css({
            top			: centerY+(-80)*eSin,
            left		: centerX+400*eCos,
            opacity		: 0.8+eSin*0.2,
            marginLeft	: -newWidth/2,
            zIndex		: Math.round(80+eSin*20),
          }).width(newWidth*1.1).height(newHeight*0.8);
        }
        total-=Math.abs(step);
        if(total<=0) return false;
        setTimeout(function(){rotate(step,total)},40);
      }
      rotate(105,360/cnt);
      $('#phoneCarousel').hover(function(){
        clearInterval(timer);
        clearInterval(timer2);
      },function(){
        timer = setInterval(function(){rotate(10,360/cnt);},4000);
        timer2 = setInterval(showDesFunc,4000);
      });
      var timer=null;
      timer=setInterval(function(){rotate(10,360/cnt);},4000);
    });
    $('#OA_NEW_more_container').addClass('OA_NEW_more_container_short');

    const searchAimProduct = (value)=>{
      let NewProductDes = productDes;
      NewProductDes = productDes.filter(item =>{
        return item.name.includes(value)
      });
      if(NewProductDes.length > 0){
        let id = NewProductDes[0].id;
        $("#OA_NEW_more_container .info").removeClass('activeInfo');
        $("#OA_NEW_more_container .info").eq(id-1).addClass("activeInfo");
        $('#article').scrollTop((id-1)*150)+"px";
      }
    };

    //键盘事件
    OA_NEW_more_input.addEventListener('keyup',(e)=>{
     if(e.keyCode === 13){
       searchAimProduct(e.target.value);
     }
    });

    // 内容改变事件
    OA_NEW_more_input.addEventListener('input',(e)=>{
      searchContent = e.data;
    });

    //搜索点击事件
    OA_NEW_more_input_image.addEventListener('click',(e)=>{
        searchAimProduct(searchContent);
    });
  </script>
</html>
